<template>


        <div class="super_container">

                <myheader :total_price='total' :count='count'></myheader>
            
                <!-- Home -->
            
								
								<!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll" data-speed="0.8"></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">Checkout</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li><a href="cart.html">Your Cart</a></li>
						<li>Checkout</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Checkout -->

	<div class="checkout">
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="checkout_container d-flex flex-xxl-row flex-column align-items-start justify-content-start">
							
						

							<!-- Cart Total -->
							<div class="cart_total">
								<div class="cart_total_inner checkout_box">
									<div class="checkout_title">Cart total</div>
									<ul class="cart_extra_total_list">
										<li class="d-flex flex-row align-items-center justify-content-start">
											<div class="cart_extra_total_title">Subtotal</div>
											<div class="cart_extra_total_value ml-auto">${{postage}}</div>
										</li>
										<li class="d-flex flex-row align-items-center justify-content-start">
											<div class="cart_extra_total_title">Shipping</div>
											<div class="cart_extra_total_value ml-auto">Free</div>
										</li>
										<li class="d-flex flex-row align-items-center justify-content-start">
											<div class="cart_extra_total_title">Total</div>
											<div class="cart_extra_total_value ml-auto">${{total}}</div>
										</li>
									</ul>

									<!-- Payment Options -->
									<div class="payment">
										<div class="payment_options">
											<label class="payment_option clearfix">Paypal
												<input type="radio" name="radio">
												<span class="checkmark"></span>
											</label>
											<label class="payment_option clearfix">Cach on delivery
												<input type="radio" name="radio">
												<span class="checkmark"></span>
											</label>
											<label class="payment_option clearfix">Credit card
												<input type="radio" name="radio">
												<span class="checkmark"></span>
											</label>
											<label class="payment_option clearfix">Direct bank transfer
												<input type="radio" checked="checked" name="radio">
												<span class="checkmark"></span>
											</label>
										</div>
									</div>

									<!-- Order Text -->
									<div class="order_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra temp or so dales. Phasellus sagittis auctor gravida. Integ er bibendum sodales arcu id te mpus. Ut consectetur lacus.</div>

									<div class="checkout_button trans_200"><a @click="pay(total)">下订单</a></div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            
                
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        
        import myheader from './header.vue'
        import myfooter from './footer.vue'
		import Cookies from 'js-cookie'
     
      
      export default {
        data () {
          return {
			  money:'',
			postage:0,
			count:0,
			total:0,
            msg: "",
            datalist:[],
            clicked:0,
            upath: '',
          result: '',
          uping:0
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){

			this.common.get_menu();
			this.total_price()
			var data = Cookies.get('cart');
			if(data){
				data = JSON.parse(data)
				this.datalist = data;

			}
			this.total_price();
			this.post_redis();
        },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			
			add:function(index){
	
				this.datalist[index].num++;
				Cookies.set('cart',this.datalist,{ expires: 7 })
				this.total_price()
				this.post_redis()

			},
			minus:function(index){

				if( this.datalist[index].num > 1){

				this.datalist[index].num--;
				Cookies.set('cart',this.datalist,{ expires: 7 })

				}
				else{
					var list = this.datalist
					list.splice(index,1)
					Cookies.set('cart',list,{ expires: 7 })
				}
				this.total_price()
				this.post_redis()

			},
			total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.postage + this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},
			post_redis:function(){
				var add_cart_redis = this.base_url+"/Addcart_redis"
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist)
				}
				this.axios.post(add_cart_redis,this.qs.stringify(params)).then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}

				}); 
			},

			

			pay:function(money){
				var url = this.base_url+"/PayPageHandler"

            //定义中介
            var _this = this;
            //使用axios发送异步请求
            this.axios.post(url,this.qs.stringify({
                money:money}))
            .then(function(result){
                console.log(result);
					console.log(result.data)
				window.location.href = result.data
                
            });
            },
		
				
		 	



		}

      }
      
      
      </script>
       
      <style>


			

			@import '../assets/styles/checkout.css';
			@import '../assets/styles/checkout_responsive.css';
      
      
      
      </style>